<template>
  <div class="home">
    <el-container>

      <el-header>专利分级分类
        <!-- <img src="" alt="">
        <el-button type="info" size="small" >退出</el-button> -->
        <div style="display: flex;justify-content: flex-end; align-items: center; line-height: 10px;">
          <span class="userName">{{ userInfo.danwei }}</span>
          <el-dropdown>

            <el-avatar :size="50" :src="circleUrl"></el-avatar>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="dialogFormVisible = true">修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="unload">退出</el-dropdown-item>

            </el-dropdown-menu>
          </el-dropdown>
        </div>

      </el-header>
      <el-container>

        <el-aside :width="asideWidth">
          <el-menu text-color="#fffff3" background-color="#333744" unique-opened router :collapse="!isCollapse"
            :collapse-transition="false" class="el-collapse-menu">

            <NavMenu></NavMenu>
          </el-menu>

        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>


    </el-container>


    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="30%">
      <el-form ref="ruleForm" :rules="rules" :model="ruleForm">
        <el-form-item prop="password" label="原密码" label-width="200">
          <el-input v-model="ruleForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item prop="newpassword" label="新密码" label-width="200">
          <el-input v-model="ruleForm.newpassword" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatepwd()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- <router-view/> -->
  </div>
</template>

<script>
// @ is an alias to /src
import NavMenu from '@/components/NavMenu.vue'
import { removeToken } from '@/utils/auth'
import Cookies from "js-cookie";
export default {
  name: 'HomeView',
  components: {
    NavMenu
  },
  data() {
    return {
      asideWidth: '260px',
      isCollapse: true,
      dialogFormVisible: false,
      circleUrl: '',
      ruleForm: {
        password: '',
        newpassword: ''
      },
      rules: {
        password: [
          {
            required: true,
            message: '请输入您的原密码',
            trigger: 'blur'
          }
        ],
        newpassword: [
          {
            required: true,
            message: '请输入您的新密码',
            trigger: 'blur'
          }
        ]
      },
      filterRows: {},
      userInfo: {}
    }
  },
  created() {

  },
  mounted() {
    this.getCookie()
    // 

  },
  methods: {
    getCookie() {
      this.userInfo =JSON.parse( Cookies.get("userInfo"));
      this.circleUrl = this.userInfo.avatar
      this.yhzh = this.userInfo.yhzh
      console.log(this.userInfo)
    },
    unload() {
      console.log(1111)
      Cookies.remove("userInfo");
      removeToken()
      this.$router.push('/')
    },
    getFilterRows() {
      var param = {
        "appKey": "c4d42996f1b29c98",
        "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
        "worksheetId": "zhxx",
        "viewId": "",
        "pageSize": 1,
        "pageIndex": 1,
        "sortId": "",
        "isAsc": "true",
        "filters": [
          {
            "controlId": "yhmm",
            "dataType": 2,
            "spliceType": 1,
            "filterType": 2,
            "value": "123456"
          },
          {
            "controlId": "yhzh",
            "dataType": 2,
            "spliceType": 1,
            "filterType": 2,
            "value": "admin"
          }
        ]
      }

      this.$apiFun.getFilterRows(param).then((res) => {
        this.filterRows = res.data.rows[0]
        this.circleUrl = res.data.rows[0].uaid.avatar
        this.yhzh = res.data.rows[0].yhzh
      })
    },
    updatepwd() {
      var param = {
        "name": this.yhzh,
        "password_old": this.ruleForm.password,
        "password_new": this.ruleForm.newpassword
      }
      this.$apiFun.getFilterRows(param).then((res) => {
        this.$message({
          type: 'success',
          message: '修改密码成功!'
        });
        removeToken()
        Cookies.remove("userInfo");
        this.$router.push('/')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
}

.userName {
  font-size: 16px;
  margin-right: 30px;
}

.is-vertical {
  height: 100%;
}

.el-header {
  display: flex;
  justify-content: space-between;
  background-color: #373d41;
  color: #fffff3;
  text-align: left;
  line-height: 60px;
  font-size: 25px;
  font-weight: bold;
}

.el-button {
  height: 32px;
  margin: auto 0;
}

.el-aside {
  background-color: #333744;
  color: #fffff3;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
}

.el-main {
  background-color: #eaedf1;
  color: #333;
  text-align: center;
  // line-height: 160px;
}

.collapseBtn {
  display: block;
  margin: 10px 0;
  cursor: pointer;
}

/* .el-icon-d-arrow-right{
	padding-left: 14px;
} */
.el-menu {
  // width: 100%;
  // border-right: 0px;
  border: none;
  text-align: left;
}
</style>